import React from 'react';
import { connect } from 'react-redux';
import { Redirect } from 'react-router-dom'
import { Layout, Form,Tag  } from 'antd';
import { actionLogin } from '../../redux/login/login.redux.js';
import './login.css';
// import PhoneLogin from './phoneLogin';
import AccountLogin from './accountLogin';
import { injectIntl } from 'react-intl';

// import {sessionManager} from "../../utils/sessionStorage";
const { Header, Footer, Content } = Layout;
// const TabPane = Tabs.TabPane;
const createForm = Form.create;
const lang=document.documentElement.lang;

@connect(state => state.auth, {actionLogin})
class newLogin extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            enterButton:'验证码',
            pane:1
        }
    }
    componentDidMount(){
        //百分比设置高度，监听窗口变化
        this.onWindowResize();
        window.addEventListener('resize', this.onWindowResize);
    }
    componentWillUnmount() {
        window.removeEventListener('resize',this.onWindowResize)
    }
    onWindowResize=()=>{
        let innerHeight=window.innerHeight;
        let selfLayout=document.querySelector('.selfLayout');
        selfLayout.setAttribute('style',`height:${innerHeight}px`)
    }
    //标签切换
    callback=(key)=> {
        console.log(key);
    }
    //
    changeLocale=()=>{
        if(lang==='zh'){
            window.location.href='index-en.html';
        }else{
            window.location.href='index.html';
        }
    }

    swicthPane=(pane)=>{
        this.setState(pane);
    }

    /*----------登陆表单处理--------------*/
    render() {
        const internationalization = this.props.intl.messages.newLogin;
        const HeaderStyle={
            height:'15%',background:'#f0f2f5',display:'flex',alignItems:'center',paddingLeft:'20%',justifyContent:'space-between'
        }
        return (
                <Layout className="selfLayout">
                    {this.props.redirectTo && this.props.location.pathname !== this.props.redirectTo
                        ? <Redirect to={this.props.redirectTo} /> : null}
                    <Header style={HeaderStyle}>
                        <img src={require('../../img/png/logo.svg')} style={{width:177}}/>
                        <Tag><span style={{fontSize:14}} onClick={this.changeLocale}>{lang==='zh'?"English":"中文"}</span></Tag>
                    </Header>
                    <Content>
                        <div className="login">
                            <div className="loginTitle">{internationalization.title}</div>
                            {this.state.pane===1&&<AccountLogin checkSw={this.swicthPane}/>}
                            {this.state.pane===2&&<div>1111</div>}
                        </div>
                        <ul className="bg-bubbles">
                            <li/>
                            <li/>
                            <li/>
                            <li/>
                            <li/>
                            <li/>
                            <li/>
                            <li/>
                            <li/>
                            <li/>
                        </ul>
                    </Content>
                    <Footer className="loginFooter">{internationalization.footer}</Footer>
                </Layout>
        )
    }
}
newLogin=createForm()(newLogin);
export default injectIntl(newLogin);